#set($layout = "layout/home/home.html")
<div class="row">
    <div class="col-sm-12">
        <div class="row">
            <div class="col-xs-12">
                <div class="tabbable">
                    <ul class="nav nav-tabs" id="myTab">
                        <li class="active">
                            <a data-toggle="tab" href="#home">
                                <i class="green ace-icon fa fa-user bigger-120"></i>
                                我的数据源
                            </a>
                        </li>

                        <li>
                            <a data-toggle="tab" href="#messages">
                                <i class="green ace-icon fa fa-heart bigger-120"></i>
                                用户分享
                                <span class="badge badge-danger">4</span>
                            </a>
                        </li>

                    </ul>

                    <div class="tab-content">
                        <div id="home" class="tab-pane fade in active" >
                            <div class="row">
                                <div class="col-sm-12  ">
                                    <div class="widget-box ui-sortable-handle" style="opacity: 1; z-index: 0;">
                                        <div class="widget-header">
                                            <h5 class="widget-title">
                                                数据源
                                                <small>管理我的数据源</small>
                                            </h5>
                                            <!-- #section:custom/widget-box.toolbar -->
                                            <div class="widget-toolbar">
                                                <a href="#" data-action="fullscreen" class="orange2">
                                                    <i class="ace-icon fa fa-expand"></i>
                                                </a>

                                                <a href="#" data-action="reload">
                                                    <i class="ace-icon fa fa-refresh"></i>
                                                </a>

                                                <a href="#" data-action="collapse">
                                                    <i class="ace-icon fa fa-chevron-up"></i>
                                                </a>
                                            </div>
                                        </div>

                                        <div class="widget-body">
                                            <div class="widget-toolbox padding-8">
                                                <div class="btn-toolbar">
                                                    <div class="btn-group">
                                                        <button class="btn btn-sm btn-success btn-white btn-round" onclick="save()">
                                                            <i class="ace-icon fa fa-plus bigger-110 green"></i>
                                                            新增
                                                        </button>
                                                    </div>

                                                    <!-- table tools -->
                                                    <div data-toggle="buttons" class="btn-group tableTools-container pull-right">
                                                    </div>

                                                </div>
                                            </div>

                                            <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                                                <thead>
                                                <tr>
                                                    <th class="center">
                                                        <label class="pos-rel">
                                                            <input type="checkbox" class="ace" />
                                                            <span class="lbl"></span>
                                                        </label>
                                                    </th>
                                                    <th>名称</th>
                                                    <th>登录名</th>
                                                    <th>JDBC_URL</th>
                                                    <th>
                                                        <i class="ace-icon fa fa-comment-o bigger-110 hidden-480"></i>
                                                        描述
                                                    </th>
                                                    <th>
                                                        <i class="ace-icon fa fa-hand-o-down bigger-110 hidden-480"></i>
                                                        状态
                                                    </th>
                                                    <th>操作</th>
                                                </tr>
                                                </thead>

                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <div class="widget-box">
                                        <div class="widget-header">
                                            <h4 class="smaller">数据库表预览</h4>
                                        </div>

                                        <div class="widget-body">
                                            <div class="widget-main">
                                                <!-- #section:elements.popover -->
                                                <p>
                                                    <span class="btn btn-sm" data-rel="popover" title="" data-content="Heads up! This alert needs your attention, but it's not super important." data-original-title="Default">Default</span>
                                                    <span class="btn btn-success btn-sm popover-success" data-rel="popover" data-placement="right" title="" data-content="Well done! You successfully read this important alert message." data-original-title="<i class='ace-icon fa fa-check green'></i> Right Success">Right</span>
                                                    <span class="btn btn-warning btn-sm popover-warning" data-rel="popover" data-placement="left" title="" data-content="Warning! Best check yo self, you're not looking too good." data-original-title="<i class='ace-icon fa fa-exclamation-triangle orange'></i> Left Warning">Left</span>
                                                </p>

                                                <p>
                                                    <span class="btn btn-danger btn-sm popover-error" data-rel="popover" data-placement="top" data-original-title="<i class='ace-icon fa fa-bolt red'></i> Top Danger" data-content="Oh snap! Change a few things up and try submitting again.">Top</span>
                                                    <span class="btn btn-info btn-sm popover-info" data-rel="popover" data-placement="bottom" title="" data-content="Heads up! This alert needs your attention, but it's not super important." data-original-title="Some Info">Bottom</span>
                                                    <span class="btn btn-inverse btn-sm popover-notitle" data-rel="popover" data-placement="bottom" data-content="Popover without a title!" data-original-title="" title="">No Title</span>
                                                </p>

                                                <!-- /section:elements.popover -->
                                            </div>
                                        </div>
                                    </div>
                                </div><!-- /.col -->
                        </div>
                    </div>

                        <div id="messages" class="tab-pane fade">
                            <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                        </div>

                    </div>
                </div>
            </div><!-- /.span -->
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="editDataSourceModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="widget-box">
                    <div class="widget-header widget-header-blue widget-header-flat">
                        <h4 class="widget-title lighter">数据源</h4>

                        <div class="widget-toolbar">
                            <label>
                                <small class="green">
                                    <b>引导配置</b>
                                </small>
                                <input id="guide-config" type="checkbox" class="ace ace-switch ace-switch-4" checked="checked"/>
                                <span class="lbl middle"></span>
                            </label>
                        </div>
                    </div>

                    <div class="widget-body">
                        <div class="widget-main">
                            <form class="form-horizontal" id="guid-form">
                            <input type="hidden" name="id" value=""/>
                            <!-- #section:plugins/fuelux.wizard -->
                            <div id="guid-fuelux-wizard-container">
                                <div>
                                    <!-- #section:plugins/fuelux.wizard.steps -->
                                    <ul class="steps">
                                        <li data-step="1" class="active">
                                            <span class="step">1</span>
                                            <span class="title">选中数据库类型</span>
                                        </li>

                                        <li data-step="2">
                                            <span class="step">2</span>
                                            <span class="title">填写基本信息</span>
                                        </li>

                                        <li data-step="3">
                                            <span class="step">3</span>
                                            <span class="title">验证是否正确</span>
                                        </li>

                                    </ul>

                                    <!-- /section:plugins/fuelux.wizard.steps -->
                                </div>

                                <hr />
                                <!-- #section:plugins/fuelux.wizard.container -->
                                <div class="step-content pos-rel">

                                    <div class="step-pane active" data-step="1">

                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-3 no-padding-right">名称</label>
                                            <div class="col-xs-12 col-sm-9">
                                                <div class="clearfix">
                                                    <input class="form-control" name="name"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="space-2"></div>
                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-3 no-padding-right">描述</label>
                                            <div class="col-xs-12 col-sm-9">
                                                <div class="clearfix">
                                                    <input class="form-control" name="description"/>
                                                </div>
                                            </div>
                                        </div>

                                        <hr class="hr hr-dotted"/>
                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-3 no-padding-right">数据源</label>
                                            <div class="col-xs-12 col-sm-9">
                                                #foreach( $dataBase in $dataBaseTypes )
                                                <div>
                                                    <label class="line-height-1 blue">
                                                        <input name="databaseType" value="$dataBase.ID" type="radio" class="ace" data-JDBC_URL_FORMAT="$dataBase.JDBC_URL_FORMAT"/>
                                                        <span class="lbl"> $dataBase.name</span>
                                                    </label>
                                                </div>
                                                #end
                                            </div>
                                        </div>
                                    </div>

                                    <div class="step-pane" data-step="2"></div>

                                    <div class="step-pane" data-step="3">
                                        <div class="center">
                                            <h3 class="blue lighter">测试数据源是否可配置正确</h3>
                                        </div>
                                        <hr/>
                                        <button class="btn btn-white btn-info btn-bold btn-block" type="button" id="testGuidDataSourceBtn"><i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>点击测试</button>
                                    </div>

                                </div>
                                <!-- /section:plugins/fuelux.wizard.container -->
                            </div>

                            <hr />
                            <div class="wizard-actions">
                                <div data-toggle="buttons" class="btn-group btn-overlap btn-corner">
                                    <button class="btn btn-sm btn-white btn-info btn-prev" disabled="disabled">
                                        <input type="checkbox" value="2">
                                        <i class="icon-only ace-icon fa fa-arrow-left bigger-110"></i>
                                        上一步
                                    </button>

                                    <button class="btn btn-sm btn-white btn-info btn-next">
                                        <input type="checkbox" value="3">
                                        下一步
                                        <i class="icon-only ace-icon fa fa-arrow-right bigger-110"></i>
                                    </button>
                                </div>
                            </div>
                            </form>

                            <form class="form-horizontal" id="config-form" style="display: none;">
                            <div id="fuelux-wizard-container">
                                <hr />
                                <!-- #section:plugins/fuelux.wizard.container -->
                                <div class="step-content pos-rel">
                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password2">选中数据源:</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <div class="clearfix">
                                                <select class="form-control" name="databaseType" data-placeholder="Choose a dataBaseType...">
                                                    <option value="">  </option>
                                                    #foreach( $dataBase in $dataBaseTypes )
                                                    <option value="$dataBase.ID" data-JDBC_URL_FORMAT="$dataBase.JDBC_URL_FORMAT" onchange="">$dataBase.name</option>
                                                    #end
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="space-2"></div>

                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password2">JDBC URL:</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <div class="clearfix">
                                                <input class="form-control" name="jdbcUrl"  />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="space-2"></div>

                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password2">user:</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <div class="clearfix">
                                                <input class="form-control" name="user" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="space-2"></div>

                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password2">password:</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <div class="clearfix">
                                                <input type="password" class="form-control" name="password"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-xs-12 col-sm-3 no-padding-right">验证正确性:</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <button class="btn btn-white btn-info" type="button" id="testDataSourceBtn"><i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>点击测试</button>
                                        </div>
                                    </div>
                                    <hr/>
                                </div>
                                <!-- /section:plugins/fuelux.wizard.container -->
                            </div>

                            <div class="wizard-actions">
                                    <button type="button" class="btn btn-info btn-white">保存</button>
                            </div>
                            </form>
                        </div><!-- /.widget-main -->
                    </div><!-- /.widget-body -->
                </div>
            </div>
            <div class="modal-footer">

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script type="text/javascript">
    //初始化dataTable
    var myTable = initDataTables("dynamic-table",{
        "bServerSide": true,
        "sAjaxSource": "${link.ContextPath}/dataSource/queryDataSource",
        "bProcessing": true,
        "columns": [
            { //复选框单元格
                className: "center",
                orderable: false,
                data: null,
                render: function (data, type, row, meta) {
                    return '<label class="pos-rel">'+
                            '<input type="checkbox" class="ace" />'+
                            '<span class="lbl"></span>'+
                            '</label>';
                }
            },
            { "data": "name"},
            { "data": "login_name"},
            { "data": "jdbc_url" },
            { "data": "description"},
            { //status
                data: "status",
                orderTable:false,
                render: function (data, type, row, meta) {
                    switch (data){
                        case "1":
                            return '<span class="label label-sm label-success">连接成功</span>';
                        case "2":
                            return '<span class="label label-sm label-error">连接失败</span>';
                        default:
                            return '<span class="label label-sm label-warning">?</span>';
                    }
                }
            },{
                data: null,
                defaultContent:"",
                orderable : false
            }
        ],
        order:[],
        "addOperaterBtns":{columnIndex:6,buttons:[
            '<a class="blue btn_edit" onclick="edit(this)"  title="修改"><i class="ace-icon fa fa-pencil bigger-130"></i></a>',
            '<a class="green btn_test" onclick="testDataSource(this);"  title="测试连接"><i class="ace-icon fa fa-link bigger-130"></i></a>',
            '<a class="red btn_del"  title="删除"><i class="ace-icon fa fa-trash bigger-130"></i></a>',
        ]},
        "drawCallback": function( settings ) {
        }
    });
    //保存
    var save = function () {
        var wizard = $('#guid-fuelux-wizard-container').data('fu.wizard')
        wizard.currentStep = 1;
        wizard.setState();
        $("#editDataSourceModal").cusModal({
            closeButton:true,
            show:true
        });
    }
    //修改
    var edit = function (el) {
        var item = myTable.row($(el).closest('tr')).data();
        $(el).closest('tr').addClass("selected").siblings().removeClass("selected");

        //jump to a step
        var wizard = $('#guid-fuelux-wizard-container').data('fu.wizard')
        wizard.currentStep = 1;
        wizard.setState();
        //form2 show
        $('#guide-config').attr('checked',true).triggerHandler('click');
        //show modal
        $("#editDataSourceModal").cusModal({
            closeButton: true,
            show: true
        });
        //set value
        setFormValue(item);
    };

    var setFormValue = function (item){
        if($("#guid-form").is(":visible")){
            //clear
            $("#guid-form :input").each(function(){$(this).val('')});
            //id
            $("#guid-form input[name='id']").val(item.id);
            $("#guid-form input[name='name']").val(item.name);
            $("#guid-form input[name='user']").val(item.login_name);
            $("#guid-form input[name='password']").val(item.password);
            $("#guid-form input[name='description']").val(item.description);
            $("#guid-form input[name='databaseType'][value='"+item.data_type_id+"']").attr('checked',true);
            var jdbcUrl = item.jdbc_url;
            var jdbcUrlValues = jdbcUrl.match(/\w+(?=:|\/|$)/g);

            var checkDataType = item.data_type_id;
            var stepT = $("#guid-fuelux-wizard-container").find(".step-content .step-pane[data-step=2]");
            stepT.html('');
            var jdbcUrlFormat = checkDataType.attr('data-JDBC_URL_FORMAT');
            var matchs = jdbcUrlFormat.match(/<\w+>/g);

            jdbcUrlValues = jdbcUrlValues.slice(jdbcUrlValues.length-matchs.length, jdbcUrlValues.length);
            var inputs = new Array();
            for(var i in matchs){
                var type = matchs[i].match(/\w+/)[0];
                inputs.push('<div class="form-group"> <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="'+type+'">'+type+'</label>'+
                        '<div class="col-xs-12 col-sm-9">'+
                        '<div class="clearfix"> <input type="text" name="'+type+'" value="'+jdbcUrlValues[i]+'" class="col-xs-12 col-sm-4" /> </div> </div> </div>');
            }
            inputs.push('<div class="form-group"> <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="user">user</label>'+
                    '<div class="col-xs-12 col-sm-9">'+
                    '<div class="clearfix"> <input type="text" name="user" value="'+item.login_name+'" class="col-xs-12 col-sm-4" /> </div> </div> </div>');
            inputs.push('<div class="form-group"> <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password">password</label>'+
                    '<div class="col-xs-12 col-sm-9">'+
                    '<div class="clearfix"> <input type="password" name="password" value="'+item.password+'" class="col-xs-12 col-sm-4" /> </div> </div> </div>');
            stepT.html(inputs.join(''));
        };

        if($("#config-form").is(":visible")){
            //clear
            $("#guid-form :input").each(function(){$(this).val('')});
            //id
            $("#guid-form input[name='id']").val(item.id);
            $("#guid-form input[name='name']").val(item.name);
            $("#guid-form input[name='user']").val(item.login_name);
            $("#guid-form input[name='password']").val(item.password);
            $("#guid-form input[name='description']").val(item.description);
            $("#guid-form input[name='databaseType'][value='"+item.data_type_id+"']").attr('checked',true);
        }
    }

    //测试连接
    var testDataSource = function (el) {
        var item = myTable.row($(el).closest('tr')).data();
        $(el).closest('tr').addClass("selected").siblings().removeClass("selected");
        $.post('${link.ContextPath}/dataSource/testDataSource',{id:item.id},function(data){
            if(data.success){
                $.gritter.add({
                    title: '测试结果：连接成功',
                    text: 'success',
                    class_name: 'gritter-success'
                });

                $(el).closest('tr').find("td:eq(5)").html('<span class="label label-sm label-success">连接成功</span>');
            }else{
                $.gritter.add({
                    title: '测试结果：失败',
                    text: data.message,
                    class_name: 'gritter-error'
                });

                $(el).closest('tr').find("td:eq(5)").html('<span class="label label-sm label-error">连接失败</span>');
            }
        });
    }
    
    var guidConfig = false;
    $('#guide-config').on('click', function(){
        guidConfig = this.checked;
        if(this.checked) {
            $('#guid-form').show();
            $('#config-form').hide();
        }
        else {
            $('#guid-form').hide();
            $('#config-form').show();
        }
    })

    //步骤
    $('#guid-fuelux-wizard-container')
    .ace_wizard({
        //step: 2 //optional argument. wizard will jump to step "2" at first
        //buttons: '.wizard-actions:eq(0)'
    })
    .on('actionclicked.fu.wizard' , function(e, info){
        if(info.step==1&&info.direction=="next"){
            var checkDataType = $("#guid-form input[name='databaseType']:checked");
            if(!$('#guid-form').valid()) return false;

            var stepT = $(this).find(".step-content .step-pane[data-step=2]");
            if(stepT.data('drawType')!=checkDataType.val()){
                stepT.data('drawType',checkDataType.val());
                var jdbcUrlFormat = checkDataType.attr('data-JDBC_URL_FORMAT');
                var matchs = jdbcUrlFormat.match(/<\w+>/g);
                var inputs = new Array();
                for(var i in matchs){
                    var type = matchs[i].match(/\w+/)[0];
                    inputs.push('<div class="form-group"> <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="'+type+'">'+type+'</label>'+
                        '<div class="col-xs-12 col-sm-9">'+
                        '<div class="clearfix"> <input type="text" name="'+type+'" class="col-xs-12 col-sm-4" /> </div> </div> </div>');
                }
                inputs.push('<div class="form-group"> <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="user">user</label>'+
                        '<div class="col-xs-12 col-sm-9">'+
                        '<div class="clearfix"> <input type="text" name="user" class="col-xs-12 col-sm-4" /> </div> </div> </div>');
                inputs.push('<div class="form-group"> <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password">password</label>'+
                        '<div class="col-xs-12 col-sm-9">'+
                        '<div class="clearfix"> <input type="text" type="password" name="password" class="col-xs-12 col-sm-4" /> </div> </div> </div>');
                stepT.html(inputs.join(''));
            }
        }
        if(info.step==2&&info.direction=="next"){
            var isValid = true;
            $(this).find(".step-content .step-pane[data-step=2] input").each(function(){
                if(this.value==""){
                    isValid=false;
                    $(this).focus();
                    return false;
                }
            });

            if(!$('#guid-form').valid()) return false;

            return isValid;
        }
    })
    .on('finished.fu.wizard', function(e) {
        var dataSource = {};
        dataSource.name=$("#guid-form input[name='name']").val();
        dataSource.description=$("#guid-form input[name='description']").val();
        dataSource.login_name=$("#guid-form input[name='user']").val();
        dataSource.password=$("#guid-form input[name='password']").val();

        var checkDataType = $("#guid-form input[name='databaseType']:checked");
        var jdbcUrlFormat = checkDataType.attr('data-JDBC_URL_FORMAT');
        var stepT = $("#guid-form .step-pane[data-step=2]")
        stepT.find('input').each(function(){
            if($(this).attr('name')=='user'||$(this).attr('name')=='password') return;
            jdbcUrlFormat = jdbcUrlFormat.replace('<'+$(this).attr('name')+'>',$(this).val());
        });
        dataSource.jdbc_url=jdbcUrlFormat;
        dataSource.data_type_id=checkDataType.val();

        $.post('${link.ContextPath}/dataSource/saveOrUpdate',dataSource,function(data){
            if(data.success){
                alert('保存成功')
                $("#editDataSourceModal").cusModal('hide');
                myTable.search(dataSource.name);
                myTable.draw();
            }else{
                alert('错误:'+data.message);
            }
        });

    }).on('stepclick.fu.wizard', function (e) {
        //e.preventDefault();//this will prevent clicking and selecting steps
    });

    //测试连接
    $("#testGuidDataSourceBtn").on('click',function(){
        var user = $("#guid-form input[name='user']").val();
        var password = $("#guid-form input[name='password']").val();
        var checkDataType = $("#guid-form input[name='databaseType']:checked");
        var jdbcUrlFormat = checkDataType.attr('data-JDBC_URL_FORMAT');
        var stepT = $("#guid-form .step-pane[data-step=2]")
        stepT.find('input').each(function(){
            if($(this).attr('name')=='user'||$(this).attr('name')=='password') return;
            jdbcUrlFormat = jdbcUrlFormat.replace('<'+$(this).attr('name')+'>',$(this).val());
        });
        validateDataSource(checkDataType.val(),jdbcUrlFormat,user,password);
    });
    $("#testDataSourceBtn").on('click',function () {

    });

    function validateDataSource(dataSourceTypeID,jdbcUrl,user,password){
        $.post('${link.ContextPath}/dataSource/testConfigDataSource',{dataSourceTypeID:dataSourceTypeID,jdbcUrl:jdbcUrl,user:user,password:password},function(data){
            if(data.success){
                $.gritter.add({
                    title: '测试结果：连接成功',
                    text: '请点击下一步保存！',
                    class_name: 'gritter-success'
                });

            }else{
                $.gritter.add({
                    title: '测试结果：失败'+data.message,
                    text: '请点击上一步修改(也可点击相应步骤更改)！',
                    class_name: 'gritter-error'
                });

            }
        });
    }


    $('#guid-form').validate({
        errorElement: 'div',
        errorClass: 'help-block',
        focusInvalid: false,
        ignore: ":hidden",
        rules: {
            name: {
                required: true
            },
            description: {
                required: true,
                maxlength: 200
            },
            jdbcUrl: {
                required: true
            },
            user: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            name: {
                required: "请输入名称."
            }
        },
        highlight: function (e) {
            $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
        },
        success: function (e) {
            $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
            $(e).remove();
        },
        errorPlacement: function (error, element) {
            if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                var controls = element.closest('div[class*="col-"]');
                if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
            }
            else if(element.is('.select2')) {
                error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
            }
            else if(element.is('.chosen-select')) {
                error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
            }
            else error.insertAfter(element.parent());
        },
        submitHandler: function (form) {
        },
        invalidHandler: function (form) {
        }
    });
</script>